<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <a-row :gutter="16">
      <a-col :span="6">
        <div class="btn-group">
          <a-button type="primary" size="small" @click="onTableCreate"
            >新增</a-button
          >
          <a-button type="default" size="small">修改</a-button>
          <a-button type="danger" size="small" @click="onTableDelete"
            >删除</a-button
          >
        </div>
        <a-table
          :columns="tableColumns"
          :data-source="tableData"
          size="small"
          bordered
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
          :customRow="rowClick"
        >
        </a-table>
      </a-col>
      <a-col :span="18"> col-12 </a-col>
    </a-row>

    <a-modal
      title="Title"
      :visible="formModalVisible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      modal
    </a-modal>
  </div>
</template>

<script>
const tableColumns = [
  {
    dataIndex: "name",
    key: "name",
    title: "角色",
    width: "200px",
  },
];

const tableData = [
  {
    key: "1",
    name: "管理员",
  },
  {
    key: "2",
    name: "普通用户",
  },
];
import { mapState } from "vuex";
export default {
  name: "DataDict",
  data() {
    return {
      selectedRowKeys: [],
      treeData: [
        {
          title: "parent 1",
          key: "0-0",
          children: [
            {
              title: "parent 1-0",
              key: "0-0-0",
              disabled: true,
              children: [
                { title: "leaf", key: "0-0-0-0", disableCheckbox: true },
                { title: "leaf", key: "0-0-0-1" },
              ],
            },
            {
              title: "parent 1-1",
              key: "0-0-1",
              children: [{ key: "0-0-1-0", slots: { title: "title0010" } }],
            },
          ],
        },
      ],
      tableColumns,
      tableData,
      formModalVisible: false,
    };
  },
  methods: {
    rowClick(record, index) {
      return {
        on: {
          click: () => {
            console.log(record, index);
          },
          dblclick: () => {
            console.log(record, index);
          }
        }
      };
    },
    onSelect(selectedKeys, info) {
      console.log("selected", selectedKeys, info);
    },
    onCheck(checkedKeys, info) {
      console.log("onCheck", checkedKeys, info);
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onTableCreate() {
      this.formModalVisible = true;
    },
    onTableDelete() {
      if (this.selectedRowKeys.length < 1) {
        this.$message.error("还未选择任何要操作的记录");
        return;
      }
      this.$confirm({
        title: "确定要删除选中的记录吗?",
        onOk() {
          console.log("OK");
        },
        content: "删除后的记录将无法恢复!",
        onCancel() {
          console.log("Cancel");
        },
        class: "test",
      });
    },
    handleCancel() {
      console.log("Clicked cancel button");
      this.formModalVisible = false;
    },
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
};
</script>

<style scoped lang="less">
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  border-radius: 4px;
  padding: 10px;
}

.tree-panel {
  border-right: 1px solid #ddd;
  height: 100%;
  padding: 10px;
}

.btn-group {
  margin-bottom: 10px;

  button {
    margin-right: 10px;
  }
}
</style>